<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <el-input
                        v-model="id"
                        placeholder="ID"
                        clearable
                >

                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="showOne">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="showAll" type="warning">显示全部</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="checked">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="roomList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="u_id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="cid"
                    label="ID"
                    sortable
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="会议室名"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="会议室类型"
                    width = "480">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type === '报告厅'" type="success">
                        报告厅
                    </el-tag>
                    <el-tag v-else-if="scope.row.type === '大型会议室'" type="danger">
                        大型会议室
                    </el-tag>
                    <el-tag v-else-if="scope.row.type === '圆桌会议室'" type="info">
                        圆桌会议室
                    </el-tag>
                    <el-tag v-else-if="scope.row.type === '小型会议室'" type="error">
                        小型会议室
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="capacity"
                    label="容纳人数"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="200">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === '空闲'" type="success">
                        空闲
                    </el-tag>
                    <el-tag v-else-if="scope.row.status === '开会中'" type="danger">
                        开会中
                    </el-tag>
                    <el-tag v-else-if="scope.row.status === '预约中'" type="info">
                        预约中
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="small"  @click="editChange(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="confirmDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total"
                    @current-change="page">
            </el-pagination>
        </div>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="ID" prop="ID"  >
                    <el-input v-model="ruleForm.cid" placeholder="自动生成" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="会议室名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio label="报告厅" style="width: 90px"></el-radio>
                        <el-radio label="大型会议室" style="width: 150px"></el-radio>
                        <br>
                        <el-radio label="圆桌会议室"></el-radio>
                        <el-radio label="小型会议室"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="容纳人数" prop="capacity">
                    <el-input v-model="ruleForm.capacity"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio label="空闲"></el-radio>
                        <el-radio label="开会中"></el-radio>
                        <br>
                        <el-radio label="预约中"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitFormInsert(ruleForm)">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="提示"
                :visible.sync="check"
                width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="ID" prop="ID"  >
                    <el-input v-model="ruleForm.cid" placeholder="自动生成" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="会议室名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio label="报告厅" style="width: 90px"></el-radio>
                        <el-radio label="大型会议室" style="width: 150px"></el-radio>
                        <br>
                        <el-radio label="圆桌会议室"></el-radio>
                        <el-radio label="小型会议室"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="容纳人数" prop="capacity">
                    <el-input v-model="ruleForm.capacity"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio label="空闲"></el-radio>
                        <el-radio label="开会中"></el-radio>
                        <br>
                        <el-radio label="预约中"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="check = false">取 消</el-button>
    <el-button type="primary" @click="changeFormData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "@/axios";

    export default {
        name: "RoomData",
        inject:['reload'],
        data(){
            return{
                pageSize: 1,
                total: 1,
                check:false,
                dialogVisible:false,
                id:null,
                ruleForm:{
                    status:"",
                    name:"",
                    cid:"",
                    type:"",
                    capacity:""
                },
                editForm:{
                },
                rules:[],
                roomList:[{
                    status:"",
                    name:"",
                    cid:"",
                    type:"",
                    capacity:""
                }]
            }
        },
        mounted() {
            this.getPage();
        },
        methods:{
            async page(currentPage){
                console.log(currentPage)
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/conferenceroom/selectAllRoomPage",
                    params:{
                        current:currentPage,
                        size:5
                    }
                }).then(res=>{

                    console.log(res)
                    this.pageSize = res.data.data.size
                    this.total = res.data.data.total
                    this.roomList= res.data.data.records
                })
                // console.log(res)
            },
            getPage(){
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/conferenceroom/selectAllRoomPage",
                    params:{
                        current:1,
                        size:5
                    }
                }).then(res=>{
                    console.log(res)
                    this.pageSize = res.data.data.size
                    this.total = res.data.data.total
                    this.roomList= res.data.data.records
                })
                // console.log(res)
            },
            checked(){
              this.dialogVisible = true;
            },
            editChange(row){
                this.check = true
                this.ruleForm = row
               // this.ruleForm.id = this.ruleForm.c_id
               // this.ruleForm.cid = this.ruleForm.c_id
                this.ruleForm.cId = this.ruleForm.cid
                console.log(row)
            },
            changeFormData(){
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/conferenceroom/update",
                    params:this.ruleForm
                }).then(res=>{
                    this.getMessage(res.data.msg)
                    console.log(res)
                    if (res.data.msg === "更新成功"){
                        this.reload()
                    }

                })
            },
            confirmDelete(index,row) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method:"delete",
                        url:"http://localhost:80/conferenceroom/deleteById",
                        params:{
                            id:row.cid
                        }
                    }).then(res =>{
                        console.log(res)
                        let code = res.data.code
                        if (code === 200){
                            this.getMessage(res.data.msg)
                            this.reload()
                        }
                        else {
                            this.getMessage(res.data.msg)
                            this.reload()
                        }

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showOne(){
                if (this.id!=null){
                    this.$axios({
                        method:"post",
                        url:"http://localhost:80/conferenceroom/getRoomById",
                        params:{
                            id: this.id
                        }
                    }).then( res =>{
                        this.editForm = res.data.data
                        this.editForm.u_id = res.data.data.uid
                        this.roomList=[]
                        this.roomList.push(this.editForm)
                        this.checked = true
                        console.log(this.editForm)
                        this.total=1
                    })
                }else {
                    this.$message({
                        type:"error",
                        message:"请输入待查询ID"
                    })
                }
            },
            //显示全部
            showAll(){
                this.getPage();
            },
            submitFormInsert(e) {
                if (e.name!=null){
                    this.$axios({
                        method:"post",
                        url:"http://localhost/conferenceroom/insert",
                        params:this.ruleForm
                    }).then(res =>{
                        console.log(res)
                        if (res.data.msg==="新增成功"){
                            this.getMessage("新增成功")
                            this.reload()
                        }
                        else {
                            this.getMessage(res.data.msg)
                        }
                    })
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            getMessage(msg){
                this.$message({
                        type: "success",
                        message: msg
                    }
                )
            },
        },
    }
</script>

<style scoped>

</style>
